<template>
  <XForm ref="form" :formData="data" :fieldList="fieldList" :options="formOption" :rules="rules" :originOption="originOption">
    <template #ShopCascade="{ value }">
      <SelectsShopCascade
        v-model:platform="data.platform_id"
        v-model:site="data.site_id"
        v-model:shop="data.shop_id"
        v-model:platform_name="data.platform"
        v-model:site_name="data.site"
        v-model:shop_name="data.shop"
      />
    </template>
  </XForm>
</template>
<script setup lang="jsx">
import XForm from "@/components/XForm/index.vue"
import SelectsShopCascade from "./SelectsShopCascade/index.vue"

const props = defineProps({
  data: { type: Object, default: () => ({}) },
  isEdit: { type: Boolean, default: false },
  formModel: { type: Object, default: () => {} },
})
import { formatDate } from "@/utils"

// const inputChange = (v) => {
//   let base = {
//     ...props.data,
//     ...v,
//   }
//   emit("update:data", base)
// }

import { overallOptions } from "@/api/public"
const emit = defineEmits(["initTable", "update:data"])
const form = ref()
const fieldList = ref([])
const initialFieldList = ref([
  {
    type: "title",
    label: "基础信息",
  },
  {
    field: "shopCascade",
    label: "来源平台/站点/店铺",
    style: { width: "100%" },
    slot: "ShopCascade",
  },
  { label: "系统单号", field: "order_sn", style: { width: "300px" } },
  {
    field: "platform_order_sn",
    label: "平台订单号",
    style: { width: "300px" },
  },
  {
    // field: "clientele_id",
    field: "buyer_name",
    label: "平台买家ID",
    style: { width: "300px" },
    tooltip: "在平台买家唯一标志, 如 Ebay 的 User ID",
  },
  {
    field: "new_order_reason",
    label: "新建订单原因",
    style: { width: "300px" },
    type: "select",
    originField: "new_order_reason",
    default: `<div class='text-[12px] leading-[17px] text-[#999] ml-[6px]'>
        <p>补发订单：商品质量问题或少发错发，需要补发商品</p>
        <p>重发订单：物流退回或订单拦截需要重发</p>
      </div>`,
    options: {
      data: [],
    },
    change: (e, form) => {
      // console.log(e)

      initialFieldList.value.forEach((item) => {
        if (item.field == "new_order_reason") {
          item.default = e == 4 ? defaultHtml[2] : defaultHtml[1]
        }
      })
      if (e == 4) {
        // form.shipping_time = formatDate(new Date())
        // form.sales_id = ""
        emit("initTable", 4)
      } else if (e == 6) {
        emit("initTable", 6)
        props.formModel.payment.original_order_currency = "CNY"

        // console.log(props.formModel.products)
        // props.formModel.products.forEach((item) => {
        //   item.original_price = 0
        // })
      } else {
        props.formModel.payment.original_order_currency = ""
        form.sales_id = ""
        form.shipping_time = ""
      }
    },
  },

  { type: "br" },
  {
    field: "sales_id",
    label: "销售人员",
    type: "cascader",
    itemProps: { placeholder: "销售人员", multiple: false },
    show: ({ model }) => model.new_order_reason == 4,
  },
  {
    field: "shipping_time",
    label: "发货时间",
    type: "dateTimeRangeNorm",
    itemProps: {
      type: "datetime",
      shortcuts: [],
      defaultTime: new Date(2000, 1, 1, 0, 0, 0),
    },
    show: ({ model }) => model.new_order_reason == 4,
  },

  {
    field: "order_remark",
    label: "订单备注",
    type: "textarea",
    full: true,
    style: { width: "100%" },
    itemStyle: { width: "100%" },
    autosize: { minRows: 2, maxRows: 6 },
    show: ({ model }) => model.new_order_reason == 4,
  },
])
const defaultHtml = {
  1: `<div class='text-[12px] leading-[17px] text-[#999] ml-[6px]'>
        <p>补发订单：商品质量问题或少发错发，需要补发商品</p>
        <p>重发订单：物流退回或订单拦截需要重发</p>
      </div>`,

  2: `<div class='text-[12px] leading-[17px] text-[#999] ml-[6px] mt-[-20px]'>
        <p>补发订单：商品质量问题或少发错发，需要补发商品</p>
        <p>重发订单：物流退回或订单拦截需要重发</p>
        <p>做账：手动创建订单，自定义导入其他费用，方便财务处理费用</p>
      </div>`,
}

onMounted(() => {
  getOptions()
})
// 枚举 数据
const originOption = ref({})
const getOptions = async () => {
  try {
    const { data } = await overallOptions({
      params: ["new_order_reason"],
      option: "new",
    })
    originOption.value.new_order_reason = data?.new_order_reason?.map((v) => ({ ...v, value: String(v.value) }))
  } catch (e) {
    console.error(e)
  }
}

const checkShopCascade = (rule, value, callback) => {
  const { platform_id, shop_id, site_id } = props.data || {}
  if (!platform_id) {
    return callback(new Error("请选择平台"))
  }
  if (!site_id) {
    return callback(new Error("请选择站点"))
  }
  if (!shop_id) {
    return callback(new Error("请选择店铺"))
  }
  callback()
}

const rules = reactive({
  new_order_reason: [{ required: true, message: "请选择新建订单原因", trigger: "change" }],
  order_sn: [{ required: true, message: "请输入系统单号", trigger: "blur" }],
  platform_order_sn: [{ required: true, message: "请输入平台订单号", trigger: "blur" }],
  shopCascade: [{ required: true, validator: checkShopCascade, trigger: "change" }],
  sales_id: [{ required: true, message: "请选择销售人员", trigger: "change" }],
  order_remark: [{ required: true, message: "请输入订单备注", trigger: "blur" }],
  shipping_time: [{ required: true, message: "请填写做账订单的发货时间！", trigger: "change" }],
})

const formOption = ref({ inline: true, labelPosition: "top" })

watch(
  () => props.isEdit,
  (val) => {
    formOption.value = Object.assign({ ...formOption.value }, { disabled: !!val })
    if (!val) {
      fieldList.value = initialFieldList.value.filter((v) => v.field != "order_sn")
      rules.new_order_reason[0].required = true
    } else {
      fieldList.value = initialFieldList.value
      rules.new_order_reason[0].required = false
    }
  },
  {
    immediate: true,
  }
)

defineExpose({ form })
</script>

<style lang="scss" scoped></style>
